<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page import="java.io.*,java.util.*" %>

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
    <title>管理入口-用户信息列表</title>
    
    <%@ include file="../common.jsp" %>
	<script type="text/javascript" src="${path }/static/vender/bootstrap/bootstrap-paginator.min.js"></script>
	<script type="text/javascript" src="${path }/static/js/mustache.min.js"></script>

<style type="text/css">
.table-responsive td {
	max-width: 100px;
	/* overflow: hidden; */
	word-break:break-all
}
</style>
  </head>

  <body>
	<jsp:include page="${pagePath }/header.jsp">
		<jsp:param value="1" name="active"/>
	</jsp:include>
  	
    <div class="container-fluid">
      <div class="row">
      	<div class="col-sm-3 col-md-2 sidebar">
			<jsp:include page="../data/left_navbar.jsp">
				<jsp:param value="6" name="active"/>
			</jsp:include>
		</div>
		
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
        <h3 class="page-header">报警信息列表</h3>
          <div class="row">
			<div class="col-sm-6 col-sm-offset-3">
				<form id="queryForm" action="./list" method="POST">
					<label class="form-inline">检索条件: 
						<input type="text" class="form-control" name="keywords" id="keywords" placeholder="mac/qq/微信号">
					</label> 
					<button type="submit" class="btn btn-info" onclick="">&nbsp;检索&nbsp;</button>
				</form>
			</div>
		  </div>
          
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>#</th>
                  <th>采集点</th>
                  <th>出现时间</th>
                  <th>特征类型</th>
                  <th>特征值</th>
                  <th>布控名称</th>
                </tr>
              </thead>
              <tbody id="listInfo">
             	
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    
	<div style="background-color: #f5f5f5;" class="text-center">
		<ul id="pageChoose"></ul>
	</div>
	
	<input id="curPage" type="hidden" />
	<input id="totalPage" type="hidden" />
	
	<jsp:include page="${pagePath }/footer.jsp"></jsp:include>
	
	<script id="tpl4table" type="x-tmpl-mustache">
		{{#listData}}
		<tr>
			<td>{{index }}</td>
            <td>{{devName}}</td>
			<td>{{inTime}}</td>
			<td>{{accountType}}</td>
			<td>{{accountCode}}</td>
			<td>{{monitorName}}</td>
		</tr>
		{{/listData}}
	</script>

	<script type="text/javascript">
		$(document).ready(function() {
			getInfoList();
		});
		
		function initPage(){
			$('#curPage').val("");
		}
		
		function getInfoList(){
			var PAGE_SIZE = 10;
			var curPage = $('#curPage').val();
			var totalPage = $('#totalPage').val();
			var keywords = $("#keywords").val();
			
	        if(curPage == ""){
				curPage = 1;
			}
		    $.ajax({
		        type: "post",
		        url: "${path }/alarm/listInfo",
		        data: {
		        	"curPage" : curPage,
					"totalPage" : totalPage,
					"keywords" : keywords
		        },
		        success: function(data) {
		        	$('#curPage').val(data.currentPage); //当前页
					$('#totalPage').val(data.totalPage); //总页数
					$("#listInfo").empty();
					$("#pageChoose").empty();
					if (data.listInfo.length > 0) {
						var listInfo = [];
						for(var i=0; i<data.listInfo.length; i++) {
							var index = PAGE_SIZE * (curPage - 1) + 1 + parseInt(i);
							var obj = {"index":index , "devName": data.listInfo[i].devName, "inTime" : dateForm(data.listInfo[i].inTime * 1000) , "accountType" : data.listInfo[i].accountType , "accountCode" : data.listInfo[i].accountCode , "monitorName" : data.listInfo[i].monitorName };
							listInfo.push(obj);
						}
						var list = new Object();
						list.listData = listInfo;
						var template = $('#tpl4table').html();
						Mustache.parse(template); 
						var htmlStr= Mustache.render(template, list);
						$("#listInfo").append(htmlStr);
						setupPageChoose(data.currentPage, data.totalPage,"pageChoose","curPage",getInfoList);
					} else {
						$("#listInfo").append("<tr><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td></tr>");
					}
				},
				error : function(error) {
					console.log("错误代码：" + error.status + "。" + "错误内容:"+ error.statusText + "。");
				}
			});
		}
	
	</script>
</body></html>